<template>
  <lay-layer v-model="layerRef.open"
             :title="layerRef.title"
             :area="layerRef.area"
             :shade-close="layerRef.shadeClose"
             :maxmin="layerRef.maxmin">

    <div style="padding: 20px">
      <lay-form :model="userRoleInfo"
                ref="layUserRoleInfoForm"
                :label-position="'right'"
                isLabelTooltip
                labelWidth="130px" style="margin: 20px">
        <lay-form-item v-if="showLoginAccount" label="登录账号" prop="loginAccount">
          <lay-input v-model="loginAccount" :disabled="layerRef.disabled">
            <template #suffix>
              <lay-button class="fly-button fly-ok-button"
                          style="height: 37px !important;margin-right: -10px !important;"
                          @click="onTapSearch">
                <lay-icon class="layui-icon-search"></lay-icon>
                搜索人员
              </lay-button>
            </template>
          </lay-input>
        </lay-form-item>
        <lay-form-item label="昵称" prop="nickName" :required="layerRef.required">
          <lay-input readonly="readonly" v-model="userRoleInfo.nickName" :disabled="layerRef.disabled"></lay-input>
        </lay-form-item>

        <lay-form-item label="身份名称" prop="roleName" :required="layerRef.required">
          <lay-input placeholder="请输入身份名称" v-model="userRoleInfo.roleName"
                     :disabled="layerRef.disabled"></lay-input>
        </lay-form-item>

        <lay-form-item label="主身份标志" prop="mainFlag" mode="inline" :required="layerRef.required">
          <lay-radio v-model="userRoleInfo.mainFlag" name="validFlag" value="Y" :disabled="layerRef.disabled">是
          </lay-radio>
          <lay-radio v-model="userRoleInfo.mainFlag" name="validFlag" value="N" :disabled="layerRef.disabled">否
          </lay-radio>
        </lay-form-item>

        <lay-form-item label="有效标志" prop="validFlag" mode="inline" :required="layerRef.required">
          <lay-radio v-model="userRoleInfo.validFlag" name="validFlag" value="Y" :disabled="layerRef.disabled">有效
          </lay-radio>
          <lay-radio v-model="userRoleInfo.validFlag" name="validFlag" value="N" :disabled="layerRef.disabled">无效
          </lay-radio>
        </lay-form-item>

        <!--              <lay-form-item label="身份部门ID" prop="deptId" mode="inline" :required="layerRef.required" >-->
        <!--                <lay-input placeholder="请输入身份部门ID" v-model="userRoleInfo.deptId" :disabled="layerRef.disabled"></lay-input>-->
        <!--              </lay-form-item>-->

        <!--              <lay-form-item label="身份部门名称" prop="deptTitle" mode="inline" :required="layerRef.required" >-->
        <!--                <lay-input placeholder="请输入身份部门名称" v-model="userRoleInfo.deptTitle" :disabled="layerRef.disabled"></lay-input>-->
        <!--              </lay-form-item>-->

        <lay-form-item label="身份有效期起" prop="startTime" mode="inline" :required="layerRef.required">
          <lay-date-picker v-model="userRoleInfo.startTime" allow-clear></lay-date-picker>
        </lay-form-item>

        <lay-form-item label="身份有效期止" prop="endTime" mode="inline" :required="layerRef.required">
          <lay-date-picker v-model="userRoleInfo.endTime" allow-clear></lay-date-picker>
        </lay-form-item>

        <lay-form-item label="排序" prop="orderNum" :required="layerRef.required">
          <lay-input-number v-model="userRoleInfo.orderNum" :disabled="layerRef.disabled"></lay-input-number>
        </lay-form-item>

        <lay-form-item label="备注" prop="remarks">
          <lay-textarea v-model="userRoleInfo.remarks" :disabled="layerRef.disabled"></lay-textarea>
        </lay-form-item>

      </lay-form>

    </div>


    <template v-slot:footer>
      <div class="fly-form-footer">
        <lay-button v-if="layerRef.submit" class="fly-button fly-ok-button " @click="saveUserRoleInfoHandler">
          <lay-icon class="layui-icon-ok"></lay-icon>
          保存
        </lay-button>
        <lay-button class="fly-button fly-close-button" @click="onTapClose">
          <lay-icon class="layui-icon-close"></lay-icon>
          关闭
        </lay-button>
      </div>
    </template>


  </lay-layer>
</template>


<script setup lang="ts" name="refUserRoleInfo">
import {reactive, ref} from "vue";
import {FormTypeEnum} from "@/fly/biz/BizModel";
import {UserRoleInfo} from "@/api/admin/model/UserRoleInfoModel";
import useTenantInfoComposable from "@/composables/admin/UserRoleInfoComposable";
import UserInfoApi from "@/api/admin/UserInfoApi";

const userInfoApi = new UserInfoApi();


const {
  userRoleInfo,
  userRoleInfoDataHandler
} = useTenantInfoComposable();

const layUserRoleInfoForm = ref<any>();

/* 当前选中的部门 */
const checkedDeptInfo = ref<any>()
/* 登录账号 */
const loginAccount = ref<string>('')
const showLoginAccount = ref<boolean>(false)
/* 弹窗 */
const layerRef = reactive<any>({
  open: false,
  title: '身份信息',
  area: ['900px', '580px'], // 宽度,  高度
  disabled: false,
  shadeClose: false,
  maxmin: false,
  submit: true,
})


/**
 * 提交
 */
function saveUserRoleInfoHandler() {
  layUserRoleInfoForm.value.validate((isValidate: boolean, model: UserRoleInfo, errors: any[]) => {
    if (!isValidate) {
      return;
    }
    userRoleInfoDataHandler(model);
  });
}


//显示弹框
const open = (type: FormTypeEnum, deptInfo: any, row?: UserRoleInfo) => {
  layerRef.title = type + '身份信息';
  checkedDeptInfo.value = deptInfo;
  showLoginAccount.value = false
  if (FormTypeEnum.ADD === type) {
    showLoginAccount.value = true
  }

  if (null !== row) {
    userRoleInfo.value = JSON.parse(JSON.stringify(row))
  } else {
    userRoleInfo.value = {
      id: '',  // 身份ID
      tenantId: '',  // 租户ID
      userId: '',  // 用户ID
      username: '',  // 登录账号
      nickName: '',  // 昵称
      roleName: '',  // 身份名称
      mainFlag: 'N',  // 主身份标志: Y/N
      validFlag: 'Y',  // 有效标志: Y/N
      deptCode: deptInfo.id,  // 身份部门ID
      deptTitle: deptInfo.title,  // 身份部门名称
      startTime: '',  // 身份有效期起
      endTime: '',  // 身份有效期止
      orderNum: '10',  // 排序
      remarks: ''  // 备注
    }
  }

  layerRef.disabled = false;
  layerRef.submit = true;
  layerRef.required = true;
  if (FormTypeEnum.VIEW === type) {
    layerRef.disabled = true;
    layerRef.submit = false;
    layerRef.required = false;
  }

  layerRef.open = true;
};


/**
 * 关闭按钮
 */
const onTapClose = () => {
  layerRef.open = false;
}

/**
 * 搜索人员
 */
const onTapSearch = () => {
  userInfoApi.findUserByAccount(loginAccount.value).then(res => {
    userRoleInfo.value.userId = res.data.id;
    userRoleInfo.value.nickName = res.data.nickName;
    userRoleInfo.value.username = loginAccount.value;
    userRoleInfo.value.roleName = checkedDeptInfo.value.title + ' — ' + res.data.nickName
  })

}


//在组件中，属性和方法，只能对当前template,
//外部需要使用的时候，需要使用 defineExpose 暴露出去给父组件
defineExpose({
  open,
  onTapClose
});

//注册事件
// const emit = defineEmits(['click']);

</script>


<style scoped>

</style>